<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue';
import { DestinationConfig } from '../../services/client';
import { ref } from 'vue';
import Errors from '../../types/Errors';

const emits = defineEmits(['validate-meta-errors'])
const models = defineModel<DestinationConfig[]>({ default: [] })
const appendDestinationConfig = () => {
    models.value.push(new DestinationConfig())
}
const removeDestinationConfig = (index: number) => {
    models.value.splice(index, 1)
}

const metadataErrors = ref<Errors>({});
const setMetaDataErrors = (errors: Errors) => {
    metadataErrors.value = errors
    emits('validate-meta-errors', metadataErrors.value)
}
</script>

<template>
    <ElRow>
        <ElSpace>
            <ElButton size="small" @click="appendDestinationConfig" :icon="Plus">新增</ElButton>
        </ElSpace>
    </ElRow>
    <ElTable :data="models" :show-header="false">
        <ElTableColumn width="80px">
            <template #default="rowScope: { $index: number }">
                <ElButton type="danger" @click="removeDestinationConfig(rowScope.$index)" :icon="Delete">

                </ElButton>
            </template>
        </ElTableColumn>
        <ElTableColumn>
            <template #default="rowScope: { row: DestinationConfig, $index: number }">
                <NtmDestinationConfigEditor v-model="rowScope.row" :column="2" @validate-error="(err: Errors) => setMetaDataErrors(rowScope.$index, err)">
                </NtmDestinationConfigEditor>
            </template>
        </ElTableColumn>
    </ElTable>
    <ElScrollbar>
    </ElScrollbar>
</template>